<#include "layout/template.ftl"/>

<@htmlHead title="商品列表">
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${resources}/assets/css/jquery-ui.css" />
		<link rel="stylesheet" href="${resources}/assets/css/datepicker.css" />
		<link rel="stylesheet" href="${resources}/assets/css/ui.jqgrid.css" />
		<link rel="stylesheet" href="${resources}/plugins/jqgrid/4.6/jqgrid.extend.css" />
		
</@htmlHead>


 
<@htmlBody 'commodity' 'goods'>

	<!-- breadcrumbs begin -->
	<#include "layout/breadcrumbs.ftl">
	<@breadcrumbs '商品管理' '商品列表'></@breadcrumbs>
	<!-- breadcrumbs start -->

	<!-- page-content begin -->
	<div class="page-content">
			
			<!-- page-header begin -->
			<div class="page-header">
				<h1>
					<i class="fa fa-trophy"></i>&nbsp;商品列表  
					<a href="${path}/manage/commodity/goods/create" class="btn btn-sm btn-warning pull-right">
						<i class="ace-icon  fa fa-plus"></i> 新 增
					</a>
					
					<a href="${path}/manage/commodity/goods/import" class="btn btn-sm btn-warning pull-right" style="margin-right: 20px;">
						<i class="ace-icon  fa fa-plus"></i> 导入
					</a>
					<a href="${path}/manage/commodity/goods/createurl" data-target="#myModal" id="create_btn" data-toggle="modal"  class="btn btn-sm btn-warning pull-right" style="margin-right: 20px;">
						<i class="ace-icon  fa fa-plus"></i> 线下商品链接
					</a>
				<h1>
				
				<div style="margin-top:20px;padding:10px 0px 0px 0px;border-top:1px solid #307ecc">
					<div style="float:right">
						<button id="find_btn"  class="btn btn-sm btn-primary">
							<i class="ace-icon fa fa-search"></i>查 询
						</button>
						<@shiro.hasRole name="admin">
						<button id="batchUp" name = "abc"  class="btn btn-danger btn-sm">
							<i class="ace-icon fa fa-search"></i>批量上架
						</button>
						</@shiro.hasRole>
						<@shiro.hasRole name="admin">
						<button id="batchDown" name = "down"  class="btn btn-danger btn-sm">
							<i class="ace-icon fa fa-search"></i>批量下架
						</button>
						</@shiro.hasRole>
				    </div>
				    
				    <div id="query" class="query-view" style="">
						<ul class="list-inline">
							<li>	
					        	<label>商品名称:</label><input type="text"  id="name" name="name"  class="input-sm" data-op="cn" /> 
							</li>
							<li>	
					        	<label>商品分类:</label>
					        	<select  id="status" name="category.id" data-op="eq"  class="input-sm" style="width:180px;">
					        		<option value="">全部</option>
					        		<#list categoryList as category>
						        		<option value="${category.id}">${category.name}</option>
					        		</#list>
					        	</select>
							</li>
							<li>	
					        	<label>商品状态:</label>
					        	<select  id="status" name="status" data-op="eq"  class="input-sm" style="width:180px;" >
					        		<option value="">全部</option>
					        		<option value="1">未上架</option>
					        		<option value="2">上架</option>
					        		<option value="3">下架</option>
					        	</select>
							</li>
							<li>	
					        	<label>商户:</label>
					        	<select  id="merchantId" name="merchant.id" data-op="eq"  class="input-sm" style="width:180px;">
					        		<option value="">全部</option>
					        		<#list merchantList as merchantItem>
						        		<option value="${merchantItem.id}">${merchantItem.name}</option>
					        		</#list>
					        	</select>
							</li>
						</ul>
						
						<!--
						<ul class="list-inline">
							<li>	
					        	<label>开始日期:</label><input type="text" id="starttime" name="createTime"  class="input-sm" data-op="ge" /> 
							</li>
							<li>	
					        	<label>结束日期:</label><input type="text" id="endtime" name="createTime"  class="input-sm" data-op="le" /> 
							</li>
						</ul>
						-->
						
						<ul class="list-inline">
							<li>	
					        	<label>虚拟产品:</label>
					        	<select  id="isVirtual" name="isVirtual" data-op="eq"  class="input-sm" style="width:180px;" >
					        		<option value="">全部</option>
					        		<option value="1">是</option>
					        		<option value="0">否</option>
					        	</select>
							</li>
							
							<li>	
					        	<label>是否打折:</label>
					        	<select  id="isDiscount" name="isDiscount" data-op="eq"  class="input-sm" style="width:180px;" >
					        		<option value="">全部</option>
					        		<option value="1">是</option>
					        		<option value="0">否</option>
					        	</select>
							</li>
						</ul>
							
						<ul class="list-inline">
							<li>	
					        	<label>是否促销:</label>
					        	<select  id="isFullcut" name="isFullcut" data-op="eq"  class="input-sm" style="width:180px;">
					        		<option value="">全部</option>
					        		<option value="1">是</option>
					        		<option value="0">否</option>
					        	</select>
							</li>
							
							<li>	
					        	<label>是否特价:</label>
					        	<select  id="isCheap" name="isCheap" data-op="eq"  class="input-sm" style="width:180px;">
					        		<option value="">全部</option>
					        		<option value="1">是</option>
					        		<option value="0">否</option>
					        	</select>
							</li>
						</ul>
						
						
					</div>
				</div>
			</div>
			<!-- page-header end -->
	
			
			
			<!-- jqGrid begin -->
			<div class="row">	
				<div class="col-md-12">	
				  	<table id="grid-table"></table>
			 		<div id="grid-pager"></div>
				</div>
			</div>	
			<!-- jqGrid end -->
	</div>		
	<!-- page-content end -->	

  <#--模态框-->
   	<!--model-->
 	<div style="background-color:rgba(0,0,0,0.5)" class="modal fade" aria-hidden="true"  data-backdrop="static" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	 	<div class="modal-dialog"  role="document" style="border: 1px solid #ccc;border-radius: 8px;overflow: hidden;width:600px">
	  		<div class="modal-header" style="background-color:white">
	     	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	       		<span aria-hidden="true">&times;</span>
	        </button>
	 			<h4 id="modaltitle" class="modal-title" id="myModalLabel">生成线下商品链接</h4>
	  		</div>
 			<div class="modal-content" style="height:350px;overflow-y:scroll; border:none">
        	</div>
		</div>
  </div>	


</@htmlBody>



<@htmlBodyScript>

		<!-- 格式化货币 -->
		<script src="${resources}/plugins/tool/accounting.min.js"></script>
		<script src="${resources}/assets/js/date-time/bootstrap-datepicker.js"></script>
		<script src="${resources}/assets/js/jqGrid/jquery.jqGrid.src.js"></script>
		<script src="${resources}/assets/js/jqGrid/i18n/grid.locale-cn.js"></script>

		<script>
			

			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";
		    var $path ='${path}';

			//价格
         	function formatPrice(cellValue, options, rowObject) {
         		return accounting.formatMoney(cellValue, "¥", 2, ",", ".");
    		}
    		
			$(function(){
				//----------------------jqgrid查询开始 ---------------------
				//分页插件开始
				$("#grid-table").jqGrid({
					url: '${path}/manage/commodity/goods/list',
				 	mtype : "post", 
					datatype: "json",
					//prmNames : {search : "search"},  
					colNames:[ 'ID','名称','分类','商户','促销价','原价','价格','销量','库存','创建时间','状态','活动','操作'],
				 	colModel: [
						{name:'id', width:60},
						{name:'name', width:100},
						{name:'category.name', width:100},
						{name:'merchant.name', width:100},
						{name:'promotionPrice',width:60,formatter:formatPrice},
						{name:'originalPrice', width:100,formatter:formatPrice},
						{name:'price', width:75,formatter:formatPrice},
						{name:'sales', width:50},
						{name:'remain', width:50},
						{
							name:'createTime', 
							width:75,
							formatter:function(cellValue, options, rowObject) {
								var output = moment(cellValue).format('YYYY-MM-DD');
								return output;
							}
						},
						{
							name:'id', 
							width:50,
							formatter:function(cellValue, options, rowObject) {
				         		var option = '<div class="ui-status">';
								if(rowObject.status==1){
									option+= "<span class='label label-sm label-success'>未上架</span>";
								}
								else if( rowObject.status==3){
									option+= "<span class='label label-sm label-primary'>下架</span>";
								}
								else if(rowObject.status==2 || rowObject.status==4 || rowObject.status==5 ){
									option+= "<span class='label label-sm label-danger'>上架</span>";
								}
								option = option +'</div>';      
			               		return option;
			        		}
						},
						{
							name:'id', 
							width:200,
							formatter:function(cellValue, options, rowObject) {
				         		var option = '<div class="ui-activity">';
								if(rowObject.isVirtual==1){
									option+= "<span class='label label-sm label-primary'>虚拟产品</span>";
								}
								if(rowObject.isDiscount==1){
									option+= "<span class='label label-sm label-pink'>打折</span>";
								}
								if(rowObject.isFullcut==1){
									option+= "<span class='label label-sm label-danger'>满减</span>";
								}
								if(rowObject.isCheap==1){
									option+= "<span class='label label-sm label-yellow'>特价</span>";
								}
								option = option +'</div>';      
			               		return option;
			        		}
						},
						{
							name:'id', 
							width: 100,
							formatter :function(cellvalue, options, rawObject) {
					    		var option = '<div class="ui-op">'; 
					    			<@shiro.hasRole name="admin">  
								                 //上架的商品可以看到下架
							                   if(rawObject.status==2 ){ 
									                option = option +'<a class="" data-toggle="tooltip" data-placement="bottom" title="下架"   href="${path}/manage/commodity/goods/down/'+cellvalue+'"  onclick=\'return confirm("是否下架?");\'>下架';
								                	option = option +'</a>';  
							                	}
							                	if(rawObject.status!=2){ 
									                option = option +'<a class="" data-toggle="tooltip" data-placement="bottom" title="上架"    href="${path}/manage/commodity/goods/up/'+cellvalue+'"  onclick=\'return confirm("是否上架?");\'>上架'; 
								                	option = option +'</a>';  
							                	}
									</@shiro.hasRole>
					    		option = option +'<a class="" data-toggle="tooltip" data-placement="bottom" title="编辑"  href="${path}/manage/commodity/goods/update/'+cellvalue+'">编辑';
				                option = option +'</a>'; 
					    		option = option +'<a class="" data-toggle="tooltip" data-placement="bottom" title="删除"  href="${path}/manage/commodity/goods/delete/'+cellvalue+'"  onclick=\'return confirm("是否删除?");\'>删除';
				                option = option +'</a>'; 
				                
								option = option +'</div>'; 
			               		return option;  
								}
							}
						
					],
					viewrecords: true, 							// 在toolbar显示的当前页数,步长,总数
					autowidth: true,								//自动宽度
					height: "450",
					rowNum: 10,
					rowList:[10,50,100],
					sortname: 'id',
					sortorder: 'desc',
					pager: "#grid-pager",
					caption: "列表",
				 	multiselect : true,
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							styleCheckbox(table);
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					}
					
				});
				//分页插件结束
				
				//------------------------------- 自定义查询开始 -------------------------------
				//自定义查询开始
				$("#find_btn").click(function(){ 
					searchData('${path}/manage/commodity/goods/list');
			    }); 
				//自定义查询结束
				
			})
		</script>	
	    <script src="${resources}/assets/js/jqGrid/jquery.jqGrid.Extract.js"></script>
	 <script type="text/javascript">
	//清除模态框
	 $("#myModal").on("hidden.bs.modal", function() {
	     $(this).removeData("bs.modal");
 	});
 </script>
	    
	    
	    <script>
			$("#batchUp").click(function(){
				var is=confirm("确定上架选中的商品么?");
				if(is==false){
					return false;
				}else{
					var ids=$("#grid-table").jqGrid('getGridParam','selarrrow');
					window.location.href="${path}/manage/commodity/goods/batchUp?ids="+ids;
				}
			})
			$("#batchDown").click(function(){
				var is=confirm("确定下架选中的商品么?");
				if(is==false){
					return false;
				}else{
					var ids=$("#grid-table").jqGrid('getGridParam','selarrrow');
					window.location.href="${path}/manage/commodity/goods/batchDown?ids="+ids;
				}
			})
		</script>
</@htmlBodyScript>